<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<style>
			body {
				margin: 0;
			}

			.el-header {
				background-color: cadetblue;
			}

			.el-aside {
				border: 1px solid cadetblue;
				position: absolute;
				top: 60px;
				bottom: 0;
			}

			.el-main {
				border: 1px solid cadetblue;
				position: absolute;
				top: 60px;
				right: 0px;
				left: 200px;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>欢迎<span style="font-weight: 900;color: white;">{{user.uname}}</span>使用本系统
				  <el-button size="mini" onclick="location.href='login.html'" type="warning" plain>退出登陆</el-button>
				</el-header>
				<el-container>
					<el-aside width="200px">
						<!-- <el-tree   :data="truedata" :props="defaultProps"
							@node-click="handleNodeClick" :default-expand-all="true"></el-tree> -->
							 <el-tree
							      :data="truedata"
								  :props="defaultProps"
							      node-key="id"
							      default-expand-all
								  @node-click="handleNodeClick"
							      :expand-on-click-node="false">
							      <span class="custom-tree-node" slot-scope="{ node, data }">
							        <span><i :class="data.imgicon"></i>{{ node.label }}</span>
							        <span>
							         
							        </span>
							      </span>
							    </el-tree>
							</el-aside>
					<el-main><iframe :src="href" frameborder="0" width="100%" height="98%"></iframe></el-main>
				</el-container>
			</el-container>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					href:"",
					user:{},
					truedata: [{
						label: '作业',
						children: [{
								label : '按钮',
								href: "element1.html"
							}, {
								label: 'icon图标',
								href: "icon.html"
							},
							{
								label: 'Layout布局',
								href: "layout布局.html"
							},
							{
								label: '文字连接',
								href: "文字连接.html"
							}, {
								label: '单选按钮组',
								href: "单选.html"
							}, {
								label: '输入框',
								href: "输入框.html"
							}, {
								label: '级联选择器',
								href: "级联.html"
							}
						]
					}, {
						label: '第二天的作业',
						children: [{
							label: 'Radio单选框',
							href: "page/Radio.html"

						}, {
							label: 'Checbox多选框',
							href: "page/checkBox.html"
						}]
					}],
					defaultProps: {
						children: 'children',
						label: 'label'
					}
				},
				methods: {
					handleNodeClick(data) {
						console.log(data.href);
						this.href=data.href;
					},initTreeData(){
						axios.get(API+"s/selectmenu").then(res=>{
							//this.truedata=res.data.data.menuList
							let s=arrayToTree(res.data.data.menuList)
							this.user=res.data.data.user;
							this.truedata=s
							console.log(s)	
						})
					}
				},mounted(){//vue生命周期函数，挂载完毕之后执行
					this.initTreeData();//初始化获取树的数据
				}
			})
		</script>
	</body>
</html>